{% set uniqid = uniqid ?? uniqid('directory_') %}
{% set idBase = "apache-vhosts-#{vhostId}-directories-#{uniqid}" %}
{% set nameBase = "apache[vhosts][#{vhostId}][directories][#{uniqid}]" %}

{% set headers = (directory.headers is defined) ? directory.headers : [] %}
{% set options = (directory.options is defined) ? directory.options : [] %}
{% set allow_overrides = (directory.allow_override is defined) ? directory.allow_override : [] %}
{% set requires = (directory.require is defined) ? directory.require : [] %}
{% set index_options = (directory.index_options is defined) ? directory.index_options : [] %}
{% set custom_fragment = (directory.custom_fragment is defined) ? directory.custom_fragment : [] %}
{% set rewrites = (directory.rewrites is defined) ? directory.rewrites : [] %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <input type="hidden" name="{{ nameBase }}[provider]"
           value="{{ directory.provider }}" />

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-path">
            Path
        </label>
        <input type="text" id="{{ idBase }}-path"
               name="{{ nameBase }}[path]"
               placeholder="/absolute/path/to/webroot" class="form-control"
               value="{{ directory.path }}" />
        <div class="help-block">
            Should be same as vhost Document Root, or nested inside.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-directoryindex">
            Directory Index
        </label>
        <input type="text" id="{{ idBase }}-directoryindex"
               name="{{ nameBase }}[directoryindex]"
               placeholder="app.php" class="form-control"
               value="{{ directory.directoryindex }}" />
        <div class="help-block">
            Default index file: index.php, index.html, app.php, etc
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-headers">
            Headers
        </label>
        <select id="{{ idBase }}-headers"
                name="{{ nameBase }}[headers][]"
                multiple class="form-control select-tags-editable">
            {% for header in headers %}
                <option selected value="{{ header }}">{{ header }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-options">
            Options
        </label>
        <select id="{{ idBase }}-options"
                name="{{ nameBase }}[options][]"
                multiple class="form-control select-tags-editable">
            {% for option in options %}
                <option selected value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-allow_override">
            Allow Override
        </label>
        <select id="{{ idBase }}-allow_override"
                name="{{ nameBase }}[allow_override][]"
                multiple class="form-control select-tags-editable">
            {% for allow in allow_overrides %}
                <option selected value="{{ allow }}">{{ allow }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-require">
            Require
        </label>
        <select id="{{ idBase }}-require"
                name="{{ nameBase }}[require][]"
                multiple class="form-control select-tags-editable">
            {% for require in requires %}
                <option selected value="{{ require }}">{{ require }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-index_options">
            Index Options
        </label>
        <select id="{{ idBase }}-index_options"
                name="{{ nameBase }}[index_options][]"
                multiple class="form-control select-tags-editable">
            {% for option in index_options %}
                <option selected value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-index_options">
            Index Options
        </label>
        <select id="{{ idBase }}-index_options"
                name="{{ nameBase }}[index_options][]"
                multiple class="form-control select-tags-editable">
            {% for option in index_options %}
                <option selected value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-custom_fragment">
            Additional Settings
        </label>
        <select id="{{ idBase }}-custom_fragment"
                name="{{ nameBase }}[custom_fragment][]"
                multiple class="form-control select-tags-editable">
            {% for option in custom_fragment %}
                <option selected value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Additional rules to append to Directory block. Separated by comma.
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-success">
        <div class="panel-heading">Rewrites</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.apache.rewrite', {'vhostId': vhostId, 'directiveId': uniqid}) }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, rewrite in rewrites %}
                    {% set blockId = "#{idBase}-rewrites-#{index}" %}
                    {% set blockName = "#{nameBase}[rewrites][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a rewrite rule
                </div>
                {% for index, rewrite in rewrites %}
                    {% include "PuphpetBundle:apache:rewrite.html.twig" with {
                        'vhostId': vhostId,
                        'directiveId': uniqid,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>
</div>
